<template>
  <div>
    <div class="header_box">
      <div class="header">
        <div class="h_left">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="h_center">
          <div class="c_Inside">
            <input
              type="text"
              placeholder="进口生鲜今日三折起售"
              class="input-with-select"
            />
            <router-link :to="{ name: 'goosType' }">
              <i class="el-icon-search"></i>
            </router-link>
          </div>
        </div>
        <div class="h_right">
          <i class="el-icon-chat-dot-square"></i>
        </div>
      </div>
    </div>
    <div class="line_b"></div>
    <!-- 列表 -->
    <div class="type_list">
      <!-- 左侧 -->
      <div class="type_list_L">
        <ul>
          <li @click="allchang()" :class="tyname == '全部分类' ? 'on' : ''">
            <a href="#">全部分类</a>
          </li>
          <li
            :class="item.typeName == tyname ? 'on' : ''"
            @click="chang(item)"
            v-for="item in typeList"
            :key="item.TypeId"
          >
            <a href="#">{{ item.typeName }}</a>
          </li>
        </ul>
      </div>
      <!-- 右侧 -->
      <type-right></type-right>
    </div>
  </div>
</template>
<script>
import typeRight from "../components/Type/TypeRight.vue";
import { mapState } from "vuex";

export default {
  components: { "type-right": typeRight },
  data() {
    return {
      typeList: [],
      tyname: "全部分类",
      tid: 1,
      list: [],
    };
  },
  created() {
      
    this.getTypelist();
    this.getChidrenList();
  },
  methods: {
    async getTypelist() {
      const { data: res } = await this.$http.get("TypeList");
      if (res.status == 200) {
        this.typeList = res.data;
      }
    },
    async chang(val) {
      this.tyname = val.typeName;
      const { data: res } = await this.$http.get("SelectChildrenList", {
        params: { tid: val.TypeId },
      });
      console.log(res);
      if (res.status == 200) {
        res.data.forEach((item) => {
          item.icon = this.imgUrl + item.icon;
        });
      }
      this.$store.commit("setTypeList", res.data);
    },
    async getChidrenList() {
      const { data: res } = await this.$http.get("getChildrenList");
      if (res.status == 200) {
        res.data.forEach((item) => {
          item.icon = this.imgUrl + item.icon;
        });
        this.$store.commit("setTypeList", res.data);
      }
    },
    allchang() {
        window.location.reload()
    },
  },
  computed: {
    ...mapState(["TypeList"]),
  },
};
</script>

<style lang="less" scoped>
.header_box {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;

  .header {
    padding: 0.5rem 0;
    height: 1.8rem;
    position: fixed;
    width: 100%;
    max-width: 640px;
    top: 0;
    background: #fff;
    z-index: 9999;
    border-bottom: 1px solid #eee;

    .h_left {
      position: absolute;
      left: 0;
      top: 0;
      height: 1.8rem;
      padding-left: 0.6rem;
      i {
        display: block;
        height: 1.1rem;
        padding-top: 0.7rem;
        font-size: 1.3rem;
      }
    }
    .h_center {
      width: 75%;
      margin: 0 auto;
      height: 1.8rem;
      line-height: 1.8rem;
      text-align: center;
      background: #f7f7f7;
      border: 1px solid #f7f7f7;
      box-sizing: border-box;
      border-radius: 4px;
      .c_Inside {
        display: block;
        width: 100%;
        height: 100%;
        .input-with-select {
          float: left;
          width: 80%;
          border: 0;
          outline: none;
          height: 1.8rem;
          line-height: 1.8rem;
          color: #999;
          font-size: 0.8rem;
          background: none;
          padding-left: 0.3rem;
        }
        i {
          float: right;
          height: 1.8rem;
          font-size: 1.2rem;
          padding-top: 0.2rem;
          padding-left: -0.7rem;
          padding-right: 0.4rem;
        }
      }
    }

    .h_right {
      position: absolute;
      right: 0;
      top: 0;
      height: 1.8rem;
      padding-right: 0.6rem;
      i {
        font-size: 1.4rem;
        padding-top: 0.7rem;
      }
    }
  }
}
.line_b {
  width: 100%;
  height: 2.85rem;
  overflow: hidden;
}
.type_list {
  width: 100%;
  height: 560px;
  overflow: hidden;
  .type_list_L {
    float: left;
    width: 25%;
    height: 100%;
    overflow: auto;
    background: #f7f7f7;
    ul {
      overflow: scroll;
      li {
        width: 100%;
        height: 3rem;
        overflow: hidden;
        border-bottom: 1px solid #eee;
        border-right: 1px solid #eee;
        box-sizing: border-box;
        a {
          display: block;
          color: #333;
          font-size: 0.9rem;
          text-align: center;
          height: 3rem;
          line-height: 3rem;
        }
      }
      .on {
        background: #fff;
        border-right: 0;
        a {
          color: #ff2150;
        }
      }
    }
  }
}
</style>